%displayFlex {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

@mixin alignItems($align: center) {

    &-start {
        @extend %displayFlex;
        align-items: $align;
        justify-content: flex-start;
    }

    &-center {
        @extend %displayFlex;
        align-items: $align;
        justify-content: center;
    }

    &-end {
        @extend %displayFlex;
        align-items: $align;
        justify-content: flex-end;
    }

    &-between {
        @extend %displayFlex;
        align-items: $align;
        justify-content: space-between;
    }

    &-around {
        @extend %displayFlex;
        align-items: $align;
        justify-content: space-around;
    }

    &-evenly {
        @extend %displayFlex;
        align-items: $align;
        justify-content: space-evenly;
    }
}

.flex {
    @extend %displayFlex;

    &-center {
        @include alignItems(center);
    }

    &-start {
        @include alignItems(flex-start);
    }

    &-end {
        @include alignItems(flex-end);
    }
}

[class*="flex-"],
[class^="flex"] {
    &.row {
        flex-direction: row;
    }

    &.row-reverse {
        flex-direction: row-reverse;
    }

    &.column {
        flex-direction: column;
    }

    &.column-reverse {
        flex-direction: column-reverse;
    }

    &.wrap {
        flex-wrap: wrap;
    }

    &.nowrap {
        flex-wrap: nowrap;
    }
}

.flex-row-stretch {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: stretch;
}

.flex-column-stretch {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
}

.flex1 {
    flex: 1;
}

.flex2 {
    flex: 2;
}

.flex3 {
    flex: 2;
}

.flex4 {
    flex: 4;
}

/*============================= 文字溢出 =============================*/
%text-ellipsis-lint {
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    &-1 {
        @extend %text-ellipsis-lint;
        -webkit-line-clamp: 1;
    }

    &-2 {
        @extend %text-ellipsis-lint;
        -webkit-line-clamp: 2;
    }

    &-3 {
        @extend %text-ellipsis-lint;
        -webkit-line-clamp: 3;
    }
    &-4 {
        @extend %text-ellipsis-lint;
        -webkit-line-clamp: 4;
    }
}